<template>
  <div class="search" :style="{paddingBottom:showBar?'40px':''}">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1592243_edabzejozd.css">
    <div class=" searchBox">
      <i class="iconfont icon-tinggeshiqu"></i>
      <i class="iconfont icon-sousuo" @click="searchBtn()"></i>
      <input type="search" name="search" placeholder="搜索歌曲、歌手、专辑"  v-model="seaStr"> 
      <!-- <label for="">搜索歌曲、歌手、专辑</label> -->
    </div>
    <hr>
    <div class="serHs" v-if="isTrue">
      <h3>搜索历史</h3>
      <div class="listHs">
        <div class="serArr">
          <a href="">{{ seaStr }}</a>
        </div>
      </div>
    </div>
    <div class="hotSer" v-if="isTrue">
      <h3>热门搜索</h3>
      <div class="list">
        <div class="hotArr" @click="hotBtn(item.first)" v-for="(item,index) in serArr" :key="index">
          <span href="">{{ item.first }}</span>
        </div>
      </div>
    </div>
	
	<div class="songlist">
		<div class="optimumSear">
			<!-- <p>最佳匹配</p> -->
			<div class="serjg" @click="playAudio(item.id)" v-for="(item,index) in optimumSear.songs" :key="index">
				<div class="item-left">
					<div class="idx">
						<span>{{ index}}</span>
					</div>
					<div class="geImg">
						<img :src="item.artists[0].img1v1Url" alt="">
					</div>
					<div class="item-text">
						<div>
							<span>{{ item.name }}</span>
							<p><span v-for="(it,index) in item.artists" :key="index">{{ it.name }} / </span></p>
						</div>
					</div>
				</div>
				<!-- <div class="item-right">
					<div>
						<i class="iconfont" @click="changeState" :class="showIdx" ></i>
					</div>
				</div>  -->
			</div>
		</div>
		<song class="song-item" v-for="(item,index) in seakeyArr" :key="index"
			:songData="{
				songIdx:index,
				picUrl:item.artists[0].img1v1Url,
				songName:item.name,
				ar:item.artists[0].name,
				al:item.album.name,
				id:item.id,
				itemMp3:item,
				}"
			:playList="ListIdData"
			:songIndex="index"
		>
		</song>
	</div>


  </div>
</template>
<script>
import api from '../js/api.js';
import song from "../components/song.vue"
export default {
    data() {
      return {
        serArr:[],
        search:"",
        seakeyArr:[],
        seaStr:"",
        isTrue:true,
		// 最佳搜索结果
		optimumSear:[],
		// 轮播图
		bannerList:[],
		// 当前搜索结果列表所有歌曲id
		ListIdData:null,//播放专辑列表所有歌曲的Id
      }
    },
	components:{
		song
	},
    created() {
      this.axios({
        url:api.searchHot
      }).then(res=>{
        window.console.log(res);
        this.serArr = res.data.result.hots;
        window.console.log(this.serArr);
      });
		// 获取轮播图
		this.axios({
		// 使用对应接口
		url:api.banner
		}).then(res=>{
		// window.console.log(res)
		this.bannerList = res.data.banners
		});
	},
	methods: {
		searchBtn(){
			this.axios({
			url:api.optSear+this.seaStr
			}).then(res=>{
			this.optimumSear = res.data.result;
			window.console.log(this.optimumSear);
			});
		window.console.log(api.seakeywords+this.seaStr)
		this.axios({
		url:api.seakeywords+this.seaStr
		}).then(res=>{
			window.console.log(res);
			this.seakeyArr = res.data.result.songs;
			this.ListIdData = this.seakeyArr.map(e=>e.id);
			window.console.log(this.seakeyArr)
			this.isTrue = false;
		})
		},
		hotBtn(first){
		this.seaStr = first;
		this.searchBtn();
		},
		playAudio(id){
			// 拼接url
			window.console.log(id);
			let audioUrl = "https://music.163.com/song/media/outer/url?id="+id+".mp3";
			// 将url设置到audio身上
			this.audio.playAudio(audioUrl)
			// this.playList = this.seakeyArr.songs.id;
			// this.songIndex = this.seakeyArr.songs.;
			// window.console.log(this.audio.vm)
			// 将当前歌曲详情提交到vuex中
			this.axios({
				url:api.songDetail+`?ids=${id}`
			}).then(res=>{
				window.console.log(res.data.songs[0])
				this.$store.commit("setMp3data",res.data.songs[0])
				this.$store.commit("setUrldata",res.data.songs[0].al.picUrl)
			})
			// 将当前专辑所有的歌曲存入vuex,播放列表
			this.$store.commit("setPlaySongList",this.playList);
			//将当前播放音频下标存入vuex,
			this.$store.commit("setPlayId",this.songIndex);
		},
	},
	// 监听播放状态弹出播放栏
	computed: {
		showBar(){
			return this.$store.state.musicData.al.id;
		},
	},

	}
	</script>
	<style lang="scss" scoped>
	.search{
	// padding-top: 48px;
	position: relative;
	.searchBox{
		padding-top: 48px;
		position: relative;
		i{
		font-size: 18px;
		color: gray;
		position: absolute;
		z-index: 10;
		&:first-of-type{
			font-size: 26px;
			color: #b20000;
			left: 10px;
			top: 50px;
		}
		&:last-of-type{
			left: 50px;
			top: 54px;
		}
		}
		input{
		position: relative;
		width: 85%;
		height: 30px;
		padding: 0 30px;
		box-sizing: border-box;
		background: #ebecec;
		border: 0;
		border-radius: 30px;
		margin-left: 32px;
		}
		label{
		position: absolute;
			left: 80px;
			top: 53px;
		font-size: 14px;
		color: #c9c9c9;
		background: transparent;
		pointer-events: none;
		z-index: 10;
		}
	}
	hr{
		margin: 15px 0;
		border: 0;
		border-bottom: 1px solid red;
	}
	.serHs{
		h3{
		text-align: left;
		margin: 0 0 8px 10px;
		}
		.listHs{
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		margin: 10px 8px;
			.serArr{
				height: 30px;
				line-height: 30px;
				font-size: 14px;
				color: #333;
				padding: 0 8px;
				border: 1px solid gray;
				border-radius: 30px;
				margin: 0 8px 8px 0;
				a{
				color: #333;
				}
			}
		}
	}
	.hotSer{
		h3{
		text-align: left;
		margin: 0 0 8px 10px;
		}
		.list{
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		margin: 10px 8px;
			.hotArr{
				height: 30px;
				line-height: 30px;
				font-size: 14px;
				color: #333;
				padding: 0 8px;
				border: 1px solid gray;
				border-radius: 30px;
				margin: 0 8px 8px 0;
			}
		}
	}
	.optimumSear{
		.serjg{
			// 歌单歌曲列表
			width: 100%;
			padding: 0 6px 6px;
			// background-color: rgba($color: rgb(5, 5, 5), $alpha: 0.6);
			color: black;
			display: flex;
			justify-content: space-between;
			margin-bottom: 6px;
			border-bottom: 1px solid lightcoral;
			.item-left{
				width: 90%;
				text-align: initial;
				display: flex;
				justify-content: flex-start;
				.idx{
					width: 8%;
					text-align: center;
					display: flex;
					align-items: center;
					span{
						display: block;
						margin: auto;
					}
				}
				.geImg{
					width: 56px;
					height: 56px;
					overflow: hidden;
					border-radius: 5px;
					display: flex;
					align-items: center;
					img{
						width: 100%;
						// border-radius: 5px;
					}
				}
				.item-text{
					width: 74%;
					margin-left: 8px;
					display: flex;
					align-items: center;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					padding: 0 6px 0 0;
					span{
						font-size: 14px;
					}
					p{
						span{
							font-size: 12px;
						}
					}
				}
			}
			.item-right{
				width: 10%;
				display: flex;
				align-items: center;
				justify-content: center;
				i{
					font-size: 28px;
				}
			}
			// 播放器
			audio{
				position: fixed;
				bottom: 0;
				left: 10%;
			}
		}
	}
	.songlist{
		// 歌单歌曲列表
		background-color: white;
		.songPaly{
			display: flex;
			justify-content: space-between;
			margin-bottom: 10px;
			i{
				font-size: 16px;
				vertical-align: baseline;
			}
			span{
				font-size: 14px;
			}
		}
	}
}

	</style>